<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 样式代码初始化 */
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background: #e5e9ea;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
            'Microsoft YaHei', Arial, 'sans-serif';
        }
        li{
            list-style: none;
        }
        /* 代码主体 */
        .box{
            width: 1230px;
            height: 381px;
            /* box-shadow: 0 0 3px red;  */
            margin: 50px auto;
        }
        /* 上 */
        .title{
            min-height: 50px;
            height: auto;
            /* background: lawngreen; */
            text-align: center;
            overflow: hidden;
        }
        .title h1{
            font-size: 30px;
            line-height: 50px;
            margin-top: 3px;
            margin-bottom: 5px;
        }
        .title h1 span{
            /* 自绝父相 */
            position: relative;
        }
        /* 伪元素 */
        .title h1 span::before,
        .title h1 span::after{
            content: "";
            display: block;
            width: 100px;
            height: 2px;
            background: #000;
            /* 绝对定位 */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .title h1 span::before{left: -117px;}
        .title h1 span::after{right: -117px;}
        /* 描述 */
        .title p{
            font-size: 14px;
            color: #101010;
            line-height: 18px;
            margin-bottom: 20px;
        }
        /* 下 */
        .list{
            height: 285px;
            /* background: lawngreen; */
        }
        .list li{
            width: 285px;
            height: 285px;
            /* box-shadow: 0 0 2px #f00; */
            background: #fff;
            float: left;
            margin-right: 30px;
            border-radius: 50%;
            /* 溢出圆角的部分隐藏 */
            overflow: hidden;
            /* 相对定位 */
            position: relative;
            /* 鼠标悬停变手 */
            cursor: pointer;
            
        }
        .list li:hover img{
            transform: scale(1.3);
        }
        .list li:last-child{
            margin-right: 0;
        }
        /* 底部区域 */
        .list li>div{
            height: 66px;
            padding-top: 10px;
            background: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }
        .list li img{
            display: block;
            width: inherit;
            height: inherit;
            /* 过渡 */
            transition: all .6s;
        }
        .list li div p{
            line-height: 16px;
            font-size: 16px;
            color: #101010;
        }
        .list li>div>div{
            margin-top: 7px;
            font-size: 14px;
            color: #666;
            /* 字体缩进 */
            text-indent: 1px;
            /* 背景图 */
            background-image: url('./imgs/strategy_pos.png');
            background-repeat: no-repeat;
            background-position: 112px 2px;
            background-size: 13px 15px;
        }
    </style>
</head>

<body>
    <!-- 容器盒子 -->
    <div class="box">
        <!-- 上 -->
        <div class="title">
            <h1>
                <span>游记攻略</span>
            </h1>
            <p>独行或同游，聪明的人与你在一起</p>
        </div>
        <!-- 下 -->
        <ul class="list">
            <li>
                <!-- 图片 -->
                <img src="./imgs/01.jpg" alt="">
                <!-- 底部 -->
                <div>
                    <p>文艺</p>
                    <p>打卡圣地</p>
                    <div>厦门</div>
                </div>
            </li>
            <li>
                <!-- 图片 -->
                <img src="./imgs/02.jpg" alt="">
                <!-- 底部 -->
                <div>
                    <p>文艺</p>
                    <p>打卡圣地</p>
                    <div>厦门</div>
                </div>
            </li>
            <li>
                <!-- 图片 -->
                <img src="./imgs/03.jpg" alt="">
                <!-- 底部 -->
                <div>
                    <p>文艺</p>
                    <p>打卡圣地</p>
                    <div>厦门</div>
                </div>
            </li>
            <li>
                <!-- 图片 -->
                <img src="./imgs/04.jpg" alt="">
                <!-- 底部 -->
                <div>
                    <p>文艺</p>
                    <p>打卡圣地</p>
                    <div>厦门</div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>